<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-05
 * tabActive.vue
-->
<template>
  <view
    v-if="activeData && activeData.length"
    style="
      background-image: url('https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/bg_bg_20250321154307A003.png');
      background-size: cover;
      padding-top: 86rpx;
      width: 95%;
      height: 40%;
      margin: 0 auto;
    "
  >
    <view class="cf bgf pd-2 mgb-2 active-detail border-radius" v-for="(item, index) of activeData" :key="index">
      <view @click="handleLink(item.id, item)" style="margin: 0 auto; background-color: #ffffff; padding: 10rpx; display: flex; align-items: center">
        <image style="width: 141rpx; height: 141rpx; margin: 10px; border-radius: 10rpx" :src="imgurl + item.icon"> </image>
        <view style="width: calc(100% - 180rpx)">
          <p>{{ item.name }}</p>
          <view style="display: flex; align-items: center; justify-content: space-between">
            <view class="">
              <p style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #808080; line-height: 33rpx; text-align: left; font-style: normal">
                库存{{ item.number }}
              </p>
              <p style="margin-top: 10px" v-if="item.price > 0">
                <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #f86315; line-height: 33rpx; text-align: left; font-style: normal">抢购价</span>
                <span style="font-family: DIN, DIN; font-weight: bold; font-size: 32rpx; color: #f86316; line-height: 39rpx; text-align: left; font-style: normal">￥{{ item.price }}</span>
              </p>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" v-if="item.price > 0 && seeButton">
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff5e0b 0%, #ff7c02 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  抢购
                </button>
              </view>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" @click="xiangqing(item.id, item.isLaundry)" v-else>
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff7c02 0%, #ff5e0b 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  详情
                </button>
              </view>
            </view>
            <subOrder v-if="ssssbbb" ref="subOrder" :merIddd="businessId" :subOrderData="subOrderData" :ebMerActivityTicketId="checked" :ebMerActivityId="activeId" />
            <!-- 水卡专属弹窗，用来添加水卡信息 -->
            <u-modal :show="cardShow" title="新增水卡信息" :showConfirmButton="false">
              <view class="placeholder">
                <u-form :labelWidth="120" labelPosition="left" :model="userInfoss" :rules="myrules" ref="$uForm">
                  <u-form-item :required="true" label="姓名" prop="name" borderBottom>
                    <u-input v-model="userInfoss.name" border="none"></u-input>
                  </u-form-item>
                  <u-form-item :required="true" label="手机号" prop="phone" borderBottom>
                    <u-input v-model="userInfoss.phone" border="none"></u-input>
                  </u-form-item>
                  <u-form-item label="卡号" prop="phoneCard" borderBottom>
                    <u-input v-model="userInfoss.phoneCard" border="none"></u-input>
                  </u-form-item>
                  <u-form-item :required="true" label="地址" prop="address" borderBottom @click="addreShowOpen">
                    <u-input v-model="userInfoss.address" border="none" disabled></u-input>
                  </u-form-item>
                </u-form>
                <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; width: 100%; gap: 10rpx">
                  <u-button text="取消" @click="cardShow = false"></u-button>
                  <u-button text="确定" @click="submitCard" color="#fa642f"></u-button>
                </view>
                <view style="color: red"><span>注：</span> 若您没有水卡，也可直接购买，客服专员会第一时间与您联系并帮您办理</view>
              </view>
            </u-modal>
            <!-- 地址选择抽屉 -->
            <u-popup :show="addreShow" @close="addShowDown" mode="right">
              <view style="width: 500rpx; padding: 20rpx; height: 100%">
                <view style="height: 85vh">
                  <view style="height: 80rpx">
                    <u-search searchIconSize="30" height="66" style="padding: 10rpx 0" placeholder="请输入关键字" v-model="keyword" @change="onInput"></u-search>
                  </view>
                  <view style="height: calc(100% - 50rpx); overflow-y: auto">
                    <u-radio-group v-model="radioAddress" placement="column">
                      <u-radio
                        iconSize="28"
                        size="32"
                        labelSize="32"
                        :customStyle="{ marginBottom: '16px' }"
                        v-for="(item, index) in serchList"
                        :key="index"
                        :label="item.dictLabel"
                        :name="item.dictLabel"
                      >
                      </u-radio>
                    </u-radio-group>
                  </view>
                </view>
                <view style="display: flex; align-items: center; justify-content: space-between; margin-top: auto; height: auto; width: 100%; gap: 40rpx; height: 10vh">
                  <u-button @click="noAddress" text="取消"></u-button>
                  <u-button @click="okAddress" color="#fa642f" text="确定"></u-button>
                </view>
              </view>
            </u-popup>
            <!-- 水卡专属弹窗；list，用来选择水卡信息 -->
            <u-modal :show="cardShowList" title="请选择您的卡" :showConfirmButton="false" :closeOnClickOverlay="true" @close="cardShowListShow">
              <view class="placeholder">
                <u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
                  <u-radio
                    size="30"
                    labelSize="30"
                    :customStyle="{ marginBottom: '8px' }"
                    v-for="(item, index) in cardList"
                    :key="index"
                    :label="item.name + ' - ' + (item.cardNumber || item.phone)"
                    :name="item.name + '-' + item.phone + '-' + item.cardNumber + '-' + item.address"
                    @change="radioChange"
                  >
                  </u-radio>
                </u-radio-group>
                <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; width: 100%; gap: 10rpx">
                  <u-button text="添加" type="primary" @click="cardShowAdd"></u-button>
                  <u-button text="确定" @click="cardShowListss" color="#fa642f"></u-button>
                </view>
              </view>
            </u-modal>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
    <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
    <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无活动</span>
  </view>
</template>

<script>
import { IMG_URL } from "../../../config/index";
import { getUserInfo } from "../../../utils/request_api.js"; /* 登录界面挪动接口 */
import { getMerInfoByid, clickActivityInfoByid, selectTicketById, appraiseList, watercardAdd, watercardList, cardAddressList } from "../../../utils/api/local";
import subOrder from "../..//index/components/subOrder.vue";
export default {
  data() {
    return {
      imgurl: IMG_URL,
    };
  },
  components: {
    subOrder,
  },
  props: {
    yaoiqngID: {
      type: String,
      default: "",
    },
    userType: {
      type: String,
      default: "",
    },
    iddd: {
      type: String,
      default: "",
    },

    seeButton: {
      type: Boolean,
      default: "",
    },

    activeData: {
      type: Array,
      default: () => [],
    },
    /** 商户id */
    businessId: {
      type: String,
      default: "",
    },
    shareMerIdBack: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    async handleLink(id, item) {
      console.log("🚀 ~ handleLink ~ item:", item);
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();

              if (this.iddd == 10086) {
                /* 新水卡规则 */
                uni.setStorageSync("iddd", this.iddd);
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("businessId", this.businessId);
                uni.setStorageSync("yaoiqngID", this.yaoiqngID);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("ebMerId", this.shareMerIdBack);
                uni.setStorageSync("userType", "1");
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&iddd=" +
            this.iddd +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID +
            "&isWatercard=" +
            item.isWatercard,
        });
      }
    },
    async xiangqing(id, item) {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();

              if (this.iddd == 10086) {
                /* 新水卡规则 */
                uni.setStorageSync("iddd", this.iddd);
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("businessId", this.businessId);
                uni.setStorageSync("yaoiqngID", this.yaoiqngID);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("ebMerId", this.shareMerIdBack);
                uni.setStorageSync("userType", "1");
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&iddd=" +
            this.iddd +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID,
        });
      }
    },
    /** 立即抢购 */
    async onGrab(id, item) {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();
              /*  || this.iddd == 10086 水卡 442鸡蛋 */
              if (item.isWatercard) {
                /* 新水卡规则 */
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("activeId", this.activeId);
                uni.setStorageSync("isLaundry", this.isLaundry);
                uni.setStorageSync("businessId", this.businessId);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("ebMerId", this.businessId);
                uni.setStorageSync("userType", this.userType);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
        return;
      }
      this.loading = true;
      selectTicketById({ id: item.id }).then((res) => {
        this.loading = false;
        this.subOrderData = res.data || {};
        this.subOrderData.activeName = this.detailData.name;
        this.subOrderData.merAvatar = this.detailData.merAvatar;
        this.subOrderData.isLaundry = this.isLaundry;
        if (item.isWatercard) {
          watercardList({ ebUserId: this.ebUserId }).then((res) => {
            if (res.code == 200) {
              if (res.rows && res.rows.length > 0) {
                this.cardList = res.rows;
                this.radiovalue1 = this.cardList[0].name + "-" + this.cardList[0].phone + "-" + this.cardList[0].cardNumber + "-" + this.cardList[0].address;
                this.cardShowList = true;
              } else {
                this.cardShow = true;
              }
            }
          });
        } else {
          // this.$refs.subOrder.handleOpen(item.id);
          uni.navigateTo({
            url:
              "/pages_h5/index/components/subOrderNo?subOrderData=" +
              JSON.stringify(this.subOrderData) +
              "&ebMerActivityTicketId=" +
              item.id +
              "&ebMerActivityId=" +
              item.ebMerActivityId +
              "&businessId=" +
              this.businessId +
              "&type=" +
              this.type,
          });
        }
      });
    },
    /* 水卡信息添加提交 */
    submitCard() {
      this.$refs.$uForm
        .validate()
        .then((res) => {
          watercardAdd({
            name: this.userInfoss.name,
            phone: this.userInfoss.phone,
            cardNumber: this.userInfoss.phoneCard,
            address: this.userInfoss.address,
            ebUserId: this.ebUserId,
          }).then((res) => {
            this.subOrderData.remark = this.userInfoss.name + "-" + this.userInfoss.phone + "-" + this.userInfoss.phoneCard + "-" + this.userInfoss.address;
            this.cardShow = false;
            this.$refs.subOrder.handleOpen(this.checked, this.yaoiqngID, this.iddd);
          });
        })
        .catch((errors) => {
          uni.$u.toast("请填写完整信息");
        });
    },
    /* 水卡信息选择 */
    cardShowListss() {
      this.subOrderData.remark = this.radiovalue1;
      this.cardShowList = false;

      this.$refs.subOrder.handleOpen(this.checked, this.yaoiqngID, this.iddd);
    } /* 获取地址列表 */,
    getAddressList() {
      cardAddressList({ pageNum: 1, pageSize: 9999, dictType: "water_card_sites" }).then((res) => {
        this.serchList = res.rows || [];
      });
    },
    /* 地址列表选择确认 */
    okAddress() {
      this.userInfoss.address = this.radioAddress;
      this.addreShow = false;
      this.cardShow = true;
      this.keyword = "";
      this.radioAddress = "";
    },
    noAddress() {
      this.addreShow = false;
      this.cardShow = true;
      this.userInfoss.address = "";
      this.radioAddress = "";
      this.keyword = "";
    },
    onInput(e) {
      // 清除之前的定时器，避免内存泄漏
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.serchList = this.serchList.filter((item) => {
          return item.dictLabel.includes(e);
        });
        this.timer = null; // 清除定时器引用
      }, 300); // 防抖延迟300ms
    },
    addreShowOpen() {
      this.cardShow = false;
      this.addreShow = true;
    },
    addShowDown() {
      this.addreShow = false;
    },
    closecardShow() {
      this.cardShow = false;
    },
    cardShowListShow() {
      this.cardShowList = false;
    },
    cardShowAdd() {
      this.cardShowList = false;
      this.cardShow = true;
    },
    groupChange(n) {
      /* 这个监听 */
    },
    radioChange(n) {},
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },

    //点击tab切换
    onchangetab(e) {
      this.tabs = e.name;
    } /** 评价列表 */,
    appraiseList() {
      /** 数据加载完成不再请求 */
      if (!this.hasMore) {
        return false;
      }
      appraiseList({
        activityId: this.activeId,
        limit: this.params.limit,
        page: this.params.page,
      }).then((res) => {
        this.hasMore = (res.data.list || []).length >= this.params.page;
        this.praiseList = this.praiseList.concat(res.data.list || []);
        this.params.page += 1;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.active-detail {
  .active-detail-title {
    font-weight: 500;
  }

  .active-detail-price {
    font-family: DIN, DIN;
    font-weight: bold;
    color: #f86315;
  }

  .active-detail-btn {
    min-width: 136rpx;
    height: 64rpx;
  }

  .active-detail-contnet {
    width: calc(100% - 180rpx);
  }
}
</style>
